<template>
	<view class="wrapper">
		<view class="list">
			<view class="item">
				<view class="img bg1"></view>
				<view class="text">
					<view class="t1">想要精准推广怎么办？</view>
					<view class="t2">职位置顶</view>
				</view>
				<view class="btn" @click="handleJump('/service/company/buyIncrement','type','jobstick')">置顶职位</view>
			</view>
			<view class="item">
				<view class="img bg2"></view>
				<view class="text">
					<view class="t1">想要快人一步，脱颖而出？</view>
					<view class="t2">紧急招聘</view>
				</view>
				<view class="btn" @click="handleJump('/service/company/buyIncrement','type','emergency')">紧急招聘</view>
			</view>
			<view class="item">
				<view class="img bg3"></view>
				<view class="text">
					<view class="t1">简历下载点数不足怎么办？</view>
					<view class="t2">简历增值包</view>
				</view>
				<view class="btn" @click="handleJump('/service/company/buyIncrement','type','resume_package')">购买简历包</view>
			</view>
			<view class="item">
				<view class="img bg4"></view>
				<view class="text">
					<view class="t1">职位曝光少怎么办？</view>
					<view class="t2">智能刷新</view>
				</view>
				<view class="btn" @click="handleJump('/service/company/buyIncrement','type','job_refresh')">刷新职位</view>
			</view>
			<view class="item">
				<view class="img bg5"></view>
				<view class="text">
					<view class="t1">摆脱聊天人数限制？</view>
					<view class="t2">职聊增值包</view>
				</view>
				<view class="btn" @click="handleJump('/service/company/buyIncrement','type','im')">购买职聊包</view>
			</view>
			<view class="item">
				<view class="img bg6"></view>
				<view class="text">
					<view class="t1">升级套餐，尽享更多权益</view>
					<view class="t2">套餐升级</view>
				</view>
				<view class="btn" @click="handleJump('/service/company/updataSetMeal','type','updataSetMeal')">套餐升级</view>
			</view>
			<view class="item">
				<view class="img bg7"></view>
				<view class="text">
					<view class="t1">小积分大用处</view>
					<view class="t2">积分订单</view>
				</view>
				<view class="btn" @click="handleJump('/service/company/integral','type','points')">购买积分</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		methods: {
			// 跳转
			/**
			 * @url 跳转路径
			 * @name 参数名称
			 * @params 参数
			 * */
			handleJump(url, name, params) {
				if (params) {
					console.log(url + '?' + name + '=' + params)
					uni.navigateTo({
						url: url + '?' + name + '=' + params
					})
				} else {
					uni.navigateTo({
						url: url
					})
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.wrapper {
		width: 100%;
		background: #f2f2f2 url('@/service/static/img/toolShopBg.png') no-repeat top center / 100% auto;

		.list {
			margin: 0 36rpx 0;
			height: auto;
			overflow-y: auto;
			padding-top: 346rpx;

			.item {
				margin-bottom: 30rpx;
				background: #fff;
				border-radius: 10rpx;
				padding: 30rpx 22rpx 30rpx 25rpx;
				overflow: hidden;

				.img {
					width: 65rpx;
					height: 72rpx;
					margin-right: 25rpx;
					float: left;

					&.bg1 {
						background: url('@/service/static/img/toolShopIcon1.png') no-repeat center center / 100% 100%;
					}

					&.bg2 {
						background: url('@/service/static/img/toolShopIcon2.png') no-repeat center center / 100% 100%;
					}

					&.bg3 {
						background: url('@/service/static/img/toolShopIcon3.png') no-repeat center center / 100% 100%;
					}

					&.bg4 {
						background: url('@/service/static/img/toolShopIcon4.png') no-repeat center center / 100% 100%;
					}

					&.bg5 {
						background: url('@/service/static/img/toolShopIcon5.png') no-repeat center center / 100% 100%;
					}

					&.bg6 {
						background: url('@/service/static/img/toolShopIcon6.png') no-repeat center center / 100% 100%;
					}

					&.bg7 {
						background: url('@/service/static/img/toolShopIcon7.png') no-repeat center center / 100% 100%;
					}
				}

				.text {
					width: 340rpx;
					float: left;
					margin-right: 10rpx;

					.t1 {
						color: #333333;
						font-size: 28rpx;
					}

					.t2 {
						color: #999999;
						font-size: 26rpx;
						display: inline-block;
						background: #F8F8F8;
						padding: 3rpx 10rpx;
						border-radius: 4rpx;
						margin-top: 10rpx;
					}
				}

				.btn {
					width: 170rpx;
					height: 60rpx;
					text-align: center;
					line-height: 60rpx;
					float: left;
					border: 1rpx solid transparent;
					background-image: linear-gradient(#ffffff, #ffffff), linear-gradient(0deg, #2755ff, #913AEB);
					background-origin: border-box;
					background-clip: content-box, border-box;
					color: #2755FF;
					font-size: 26rpx;
					border-radius: 50rpx;
				}
			}
		}
	}
</style>